$(function () {
    // 定义获取购物车数据的函数
    loadCartData();

    // 通过代码的形式来提交整个表单，这里是全局提交表单
    $(".btn-area").click(() => {
        // 获取总金额
        let totalAmount = $(".price-sum").find("em").html().substring(1);
        console.log(totalAmount);
        // 将总金额设置到支付表单的总金额输入域中
        $("input[name=totalAmount]").val(totalAmount);
        // 通过js来提交表单
        $("#payForm").submit();
    });
})

// 给页面中的元素绑定事件
function bindEvent() {
// 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
        // 点击全选后，先获取全选按钮的状态
        let checked = this.checked;
        console.log(checked);
        $(".j-checkbox").each(function (index, elem) {
            // elem：代表复选框
            // 获取购物车id
            let cartId = $(elem).parent('.p-checkbox').parent('.cart-item').find('[name=cartId]').val();
            // 获取状态
            let check = checked ? 1 : 0;
            // 获取数量
            let quantity = $(elem).parent('.p-checkbox').parent('.cart-item').find('.itxt').val();
            console.log(cartId, check, quantity);
            changeCartStatus(cartId, check, quantity);
        });
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function () {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
        // 获取购物车id
        let cartId = $(this).parent('.p-checkbox').parent('.cart-item').find('[name=cartId]').val();
        // 获取状态
        let check = this.checked ? 1 : 0;
        // 获取数量
        let quantity = $(this).parent('.p-checkbox').parent('.cart-item').find('.itxt').val();
        console.log(cartId, check, quantity);
        changeCartStatus(cartId, check, quantity);
    });
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function () {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1); //p为字符串型
        console.log(p);
        var price = (p * n).toFixed(2); //这里有隐式转换
        // 小计模块
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
        // 将当前的数量同步到数据库
        // 获取当前增加数量的按钮的所在的.cart-item
        let $cartItemDiv = $(this).parent('.quantity-form').parent('.p-num').parent('.cart-item');
        // 获取购物车id
        let cartId = $cartItemDiv.find('[name=cartId]').val();
        // 获取状态
        let checked = $cartItemDiv.find('.j-checkbox')[0].checked;
        let check = checked ? 1 : 0;
        // 获取数量
        let quantity = $cartItemDiv.find('.itxt').val();
        console.log(cartId, check, quantity);
        changeCartStatus(cartId, check, quantity);
    });
    $(".decrement").click(function () {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
        // 将当前的数量同步到数据库
        // 获取当前增加数量的按钮的所在的.cart-item
        let $cartItemDiv = $(this).parent('.quantity-form').parent('.p-num').parent('.cart-item');
        // 获取购物车id
        let cartId = $cartItemDiv.find('[name=cartId]').val();
        // 获取状态
        let checked = $cartItemDiv.find('.j-checkbox')[0].checked;
        let check = checked ? 1 : 0;
        // 获取数量
        let quantity = $cartItemDiv.find('.itxt').val();
        console.log(cartId, check, quantity);
        changeCartStatus(cartId, check, quantity);
    });
    //  4. 用户修改文本框的值 计算 小计模块
    $(".itxt").change(function () {
        // 先得到文本框的里面的值 乘以 当前商品的单价
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 计算总计和总额模块
    getSum();

    function getSum() {
        var count = 0; // 计算总件数
        var money = 0; // 计算总价钱
        $(".itxt").each(function (i, ele) {
            // 判断
            if ($(ele).parents('.cart-item').find('.j-checkbox')[0].checked == true) {
                count += parseInt($(ele).val()); //获取过来的值为字符型（需要转化成数字型）
            }
        });
        $(".amount-sum em").text(count); //修改总件数
        $(".p-sum").each(function (i, ele) {
            if ($(ele).parent('.cart-item').find('.j-checkbox')[0].checked == true) {
                money += parseFloat($(ele).text().substr(1));
            }
        });
        $(".price-sum em").text("￥" + money.toFixed(2)); //修改总价钱
    }

    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function () {
        if (confirm("您确认删除该条购物车记录吗?")) {
            // 删除的是当前的商品
            $(this).parents(".cart-item").remove();
            getSum();
            let cartId = $(this).parents('.cart-item').find('[name=cartId]').val();
            $.getJSON(`/api/cart/deleteCartById/${cartId}`, ret => {
                console.log(ret);
                if (ret['code'] == 200) {
                    // 删除成功
                    loadCartData();
                }
            });
        }
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function () {
        if (confirm("您确认删除选中购物车记录吗?")) {
            // 同步到后端
            // 获取到所有选中的购物车id
            let idsArray = [];
            $(".j-checkbox:checked").each((index, ele) => {
                console.log(ele);
                // 选中的
                let cartId = $(ele).parents('.cart-item').find('[name=cartId]').val();
                console.log(cartId);
                idsArray.push(cartId);
            });
            console.log(idsArray);
            let ids = idsArray.join(","); // 126,127,128
            // 发送请求
            $.getJSON("/api/cart/deleteCartsByIds", {
                ids: ids
            }, ret => {
                console.log(ret);
                if (ret['code'] == 200) {
                    // 删除的是小的复选框选中的商品
                    // $(".j-checkbox:checked").parents(".cart-item").remove();
                    loadCartData();
                    getSum();
                }
            });

        }
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    });
}

function loadCartData() {
    // 获取当前登录用户的购物车数据
    $.getJSON("/api/cart/find", ret => {
        console.log(ret);
        let data = ret['data'];
        // 购物车字符串
        let strCart = '';
        data.forEach((item, index) => {
            strCart += `
                <div class="cart-item ${item.checked == 1 ? 'check-cart-item' : ''}">
                    <input type="hidden" value="${item.id}" name="cartId"/>
                    <div class="p-checkbox">
                        <input type="checkbox" name="" id="" ${item.checked == 1 ? 'checked' : ''} class="j-checkbox">
                    </div>
                    <div class="p-goods">
                        <div class="p-img">
                            <img src="/upload/p1.jpg" alt="">
                        </div>
                        <div class="p-msg">${item.name}</div>
                    </div>
                    <div class="p-price">￥${item.price}</div>
                    <div class="p-num">
                        <div class="quantity-form">
                            <a href="javascript:;" class="decrement">-</a>
                            <input type="text" class="itxt" value="${item.quantity}">
                            <a href="javascript:;" class="increment">+</a>
                        </div>
                    </div>
                    <div class="p-sum">￥${item.price * item.quantity}</div>
                    <div class="p-action"><a href="javascript:;">删除</a></div>
                </div>
            `;
        });
        // 将strCart填充到.cart-item-list中
        $(".cart-item-list").html(strCart);
        // 购物车数据渲染完成，这时可以绑定事件
        bindEvent();
    });
}

// 定义一个函数，修改购物车中某个记录的状态
// id:购物车id
// check:选中状态
// quantity:数量
function changeCartStatus(id, check, quantity) {
    $.post('/api/cart/changeCartStatus', {
        id, check, quantity
    }, ret => {
        console.log(ret);
        if (ret['code'] == 200) {
            // 刷新购物车的数据
            loadCartData();
        }
    }, 'json');
}

// 根据id删除购物车
// self：代表删除按钮本身<a href="javascript:deleteCartById(this);">删除</a>
// function deleteCartById(cartId){
//     console.log(cartId);
//     let flag = window.confirm("您确认删除该条购物车记录吗?");
//     console.log(flag);
//     // if (confirm("您确认删除该条购物车记录吗?")) {
//     //     $.getJSON(`/api/cart/deleteCartById/${cartId}`, ret => {
//     //         console.log(ret);
//     //         if (ret['code'] == 200) {
//     //             // 删除成功
//     //             loadCartData();
//     //         }
//     //     });
//     // }
// }
